import React, { useState } from "react";
import { Code } from "../../Code";
import { Modal } from "../../Modal";
import "./style.css";
export default function Index() {
  const [anime1, setAnime1] = useState(false);
  const [anime2, setAnime2] = useState(false);
  return (
    <>
      <div className="page column">
        <div className="sub-title">按作用</div>
        <div className="cover">
          <div>过渡</div>
          <div>强调</div>
        </div>
        <div className="cover">
          <div
            className="card anime1"
            style={{ background: "#096dd9", color: "#fff" }}
            onClick={() => setAnime1(true)}
          >
            A
          </div>
          <div
            className="card anime1b"
            style={{ background: "#096dd9", color: "#fff" }}
            onClick={() => setAnime1(true)}
          >
            B
          </div>
          <div
            className="card anime2"
            style={{ background: "#faad14", color: "#fff" }}
            onClick={() => setAnime2(true)}
          >
            强调
          </div>
        </div>
      </div>
      {anime1 && <Anime1Code onClose={() => setAnime1(false)} />}
      {anime2 && <Anime2Code onClose={() => setAnime2(false)} />}
    </>
  );
}

function Anime1Code(props) {
  return (
    <Modal onClose={props.onClose}>
      <Code lang="jsx">
        {`<div className="anime1-1">
  A
</div>
<div className="anime1-2">
  B
</div>`}
      </Code>
      <Code lang="css">
        {`.anime1-1 {

  animation  : anime1-1 4s ease 1s infinite both;

}
.anime1-2 {

  animation  : anime1-2 4s ease 1s infinite both;

}
@keyframes anime1-1 {

  0%,100%{
    background-color: #096dd9;
    width           : 120px;
  }

  50% {
    background-color: #52c41a;
    width           : 40px;
  }

}
@keyframes anime1-2 {

  0%,  100% {
    background-color: #52c41a;
    width           : 40px;
  }

  50% {
    background-color: #096dd9;
    width           : 120px;
  }

}`}
      </Code>
    </Modal>
  );
}

function Anime2Code(props) {
  return (
    <Modal onClose={props.onClose}>
      <Code lang="jsx">
        {`<div className="anime2">
  强调
</div>`}
      </Code>
      <Code lang="css">
        {`.anime2 {
  animation: anime2 4s infinite;
}

@keyframes anime2 {

  0%,  5%,  10%,  15% {
    transform: rotate(-5deg);
  }

  2.5%,  7.5%,  12.5% {
    transform: rotate(5deg);
  }

  17.5% {
    transform: none;
  }
  
}`}
      </Code>
    </Modal>
  );
}
